<template>
  <div>
    <el-dialog
      title="数据合并"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="30%"
      append-to-body
    >
      <template #default>
        <el-row>
          <span>合并方向</span>
          <el-select v-model="formModel.config.axis">
            <el-option
              v-for="axis in concatAxis"
              :key="axis.value"
              :label="axis.label"
              :value="axis.value"
            />
          </el-select>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12">
            <el-table :data="leftInputData" height="250">
              <el-table-column
                label="左表列名"
                width="150"
                prop="columnName"
              ></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table :data="rightInputData" height="250">
              <el-table-column
                label="右表列名"
                width="150"
                prop="columnName"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleUpdate">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import DualCsvInputNode from '../publicComponents/DualCsvInputNode.js'
  import DialogHandler from '../publicComponents/DialogHandler.js'

export default {
  name: 'DataConcat',
  mixins: [DualCsvInputNode, DialogHandler],
  data() {
    return {
      concatAxis: [
        { value: 1, label: '横向' },
        { value: 0, label: '纵向' }
      ]
    }
  }
}
</script>

<style>
</style>
